<template>
  <div :style="`height:${calTableHeight()}px;overflow:auto;`">
    <div v-for="(table, idx) in tableData" :key="idx" class="table">
      <div class="table-header">
        <!-- row1 -->
        <div class="table-header-row1">
          <div class="row1-left">
            <div class="row1-left-item">
              <!-- 三边长 -->
              {{ $t('三边尺寸') }}
            </div>
            <div class="row1-left-item">
              <!-- 重量(kg) -->
              {{ $t('重量') }}(kg)
            </div>
            <div class="row1-left-item">{{ $t('捆包费') }}(JPY)</div>
          </div>
          <!-- 	2:黑猫 3：佐川 -->
          <div class="row1-right">
            <!-- {{ table.type == 2 ? "黑猫快递" : "佐川快递" }} -->
            {{ table.type == 2 ? $t('黑猫快递') : $t('佐川快递') }}
          </div>
        </div>
        <!-- row2 -->
        <div class="table-header-row2">
          <div class="row2-left">
            <!-- 地区 -->
            {{ $t('地区') }}
          </div>
          <div class="row2-right">
            <div class="row2-right-item" v-for="list in table.list">
              {{ list.area }}
            </div>
          </div>
        </div>
        <!-- row3 -->
        <div class="table-header-row3">
          <div class="row3-left">
            <!-- 省 -->
            {{ $t('省') }}
          </div>
          <div class="row3-right">
            <div class="row3-right-item" v-for="address in table.list">
              <div v-for="add in address.addressList">{{ add }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- content -->
      <div class="table-content">
        <!-- left -->
        <div class="table-content-left">
          <div
            class="table-content-left-item"
            :style="index > 2 ? 'color:red' : ''"
            v-for="(item, index) in tableContentLeft[idx]"
          >
            <div>{{ item.trilateralSize }}cm</div>
            <div>{{ item.weight }}kg</div>
            <div>
              <div style="display: flex; align-items: center" v-show="hasPermission('distribution:express:edit')">
                <el-input
                  v-show="hasPermission('distribution:express:edit')"
                  size="mini"
                  type="number"
                  :disabled="!item.canEdit"
                  @blur="handleEditExpressFee({ ...item, type: table.type })"
                  v-model.number="item.bundleFee"
                />

                <span
                  @click="item.canEdit = !item.canEdit"
                  style="cursor: pointer; margin: 0 2px"
                  class="el-icon-edit"
                ></span>
              </div>
              <div v-show="!hasPermission('distribution:express:edit')">{{ item.bundleFee }}</div>
            </div>
          </div>
        </div>
        <!-- right -->
        <div class="table-content-right">
          <div class="table-content-right-item" v-for="(l, _index) in table.list">
            <div v-for="ll in l.priceGroup">
              {{ ll.price ? (+ll.price).toFixed() : '' }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { table, updateBatchBundle } from '@/api/platform/express'
import { checkPermi } from '@/utils/permission'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    FormData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      form: {
        bundleFee: '',
      },
      rules: {
        bundleFee: [{ required: true, message: '请输入', trigger: 'blur' }],
      },

      tableData: [],
      tableContentLeft: [],
      loadingIncetance: null,
    }
  },
  // watch: {
  //   FormData: function (newV) {
  //     this.getList()
  //   },
  // },
  // mounted() {
  //   this.getList()
  // },
  methods: {
    startLoading() {
      this.loadingIncetance = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
    },
    endLoading() {
      this.loadingIncetance?.close()
    },
    hasPermission(str) {
      return checkPermi([str])
    },
    handleEditExpressFee({ bundleFee, weight, trilateralSize, type }) {
      this.$confirm(this.$t('确认修改?'), this.$t('提示'), { type: 'warning' }).then(() => {
        const data = {
          distrId: this.FormData.distrId,
          list: [{ bundleFee, weight, trilateralSize, type }],
        }
        updateBatchBundle(data).then((res) => {
          const { code, msg } = res
          if (code === 200) {
            this.$message({ type: 'success', message: msg })
            this.getList()
          }
        })
      })
    },
    getList() {
      this.startLoading()

      this.tableData = []
      this.tableContentLeft = []
      const data = {
        id: this.FormData.id,
      }
      table(data)
        .then((res) => {
          // 2:黑猫 3：佐川
          const { code } = res
          // console.log(`res ==>`, JSON.parse(JSON.stringify(res)))
          if (code === 200) {
            // this.tableData = res.data
            this.$set(this, 'tableData', res.data)

            res.data.map((_, index) => {
              let obj = {
                trilateralSize: _.list[index].priceGroup.map((i) => i.trilateralSize),
                weight: _.list[index].priceGroup.map((i) => i.weight),
                price: _.list[index].priceGroup.map((i) => i.price),
              }

              const content = obj.trilateralSize.map((item, index) => {
                return {
                  trilateralSize: item,
                  weight: (obj.weight[index] / 1000).toFixed(2),
                  bundleFee: (+_.bundleFeeList[index]).toFixed(),
                  canEdit: false,
                }
              })
              this.tableContentLeft.push(content)
            })
          }
        })
        .finally(() => {
          this.endLoading()
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.table {
  $border: 1px solid #ccc;
  margin-bottom: 30px;
  $leftWidth: 280px;
  &-header {
    line-height: 25px;
    &-row1 {
      display: flex;
      border: $border;
      .row1-left {
        display: flex;
        width: $leftWidth;
        text-align: center;
        &-item {
          flex: 1;
          border-right: $border;
        }
      }
      .row1-right {
        flex: 1;
        text-align: center;
        color: red;
      }
    }
    &-row2 {
      display: flex;
      border: $border;
      .row2-left {
        width: $leftWidth;
        text-align: center;
        border-right: $border;
      }
      .row2-right {
        flex: 1;
        text-align: center;
        display: flex;
        &-item {
          flex: 1;
          border-right: $border;
        }
      }
    }
    &-row3 {
      display: flex;
      border: $border;
      .row3-left {
        width: $leftWidth;
        text-align: center;
        border-right: $border;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .row3-right {
        flex: 1;
        text-align: center;
        display: flex;
        &-item {
          flex: 1;
          border-right: $border;
          div {
            margin: 2px 0;
            font-weight: bold;
          }
        }
      }
    }
  }
  &-content {
    display: flex;
    line-height: 25px;

    &-left {
      display: flex;
      flex-direction: column;
      width: $leftWidth;
      &-item {
        flex: 1;
        text-align: center;
        display: flex;
        border: $border;
        div {
          flex: 1;
          &:nth-child(2) {
            border-right: $border;
            border-left: $border;
          }
        }
      }
    }
    &-right {
      display: flex;
      flex: 1;
      &-item {
        text-align: center;
        display: flex;
        flex-direction: column;
        flex: 1;
        div {
          flex: 1;
          border: $border;
        }
      }
    }
  }
}
</style>
